<template>
  <div id="uStudent">
    <div style="position:relative">
        <el-autocomplete
                  v-model="state4"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="搜索框"
                  @select="handleSelect" >
                  <i
                    class="el-icon-search el-input__icon"
                    slot="suffix"
                  >
                  </i>
      </el-autocomplete>
      <div  ref="addC"  style="opacity:1.0;padding:0;height:25px;border-bottom:1px solid #eee;transition:all 0.6s ease;width:50px;position:absolute;bottom:20%;left:230px;z-index:100;overflow:hidden">
        <div style="font-weight:bold;cursor:point;opacity:1.0;z-index:100;background:#eee;right:15px;position:absolute;" ref="addTittle" @click="addC">
            {{addTittle}}
        </div>
        <img style="height:18px;width:7px;position:absolute;top:2px;right:3px;z-index:1000" :src="addSrc">
        <div class="addC" ref="op" style="opacity:1.0;transition:all 0.2;display:none">
          <select style="width:80px" v-model="selected" change="changeType()">
                <option disabled value="none">选择类型</option>
                <option value="daoru">导入表格</option>
                <option value="工号">添加学生</option>
          </select>
          <transition name="showUp">
            <div v-if="selected==='工号'" ref="num"  style="position:absolute;bottom:0px;left:100px;width:700px" key="num">
              <span>姓名</span><input style="margin-right:0.5vw;padding:0.4vw;font-size:1.0vw;width:50px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.2);" v-model="classNum" class="numInput" placeholder="">
              <span>学号</span><input style="margin-right:0.5vw;padding:0.4vw;font-size:1.0vw;width:90px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.2);"  class="numInput" placeholder="">
              <span>院系</span><input style="margin-right:0.5vw;padding:0.4vw;font-size:1.0vw;width:50px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.2);"  class="numInput" placeholder="">
              <span>手机</span><input style="padding:0.4vw;font-size:1.0vw;width:100px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.2);"  class="numInput" placeholder="  ">
              <span style="margin:0;padding:0.7% 0.4% 0.7% 2%;font-weight:bold;cursor:pointer" type="primary">确定</span>
            </div>
            <div v-else ="selected==='daoru'" style="position:absolute;bottom:0;left:100px;" key="upload">
              <input @change="getFile($event,'4')"  type="file" style="opacity:0.0;width:65px;position:relative;bottom:5px;left:0;z-index:100">
              <div style="position:absolute;bottom:5px;left:0px;z-index:99;font-weight:bold">点击上传</div>
              <div style="position:absolute;bottom:5px;left:80px;width:400px;color:gray">
                <span>文件:</span>
                <span>{{upath.name}}</span>
                <span @click="upload" style="right:0px;position:absolute;margin:0;padding:0.7% 0.4% 0.7% 2%;font-weight:bold;cursor:pointer" type="primary">确定</span>
              </div>
            </div>
          </transition>
        </div>
      </div>
      </div>
    <el-table
      border="true"
      align="left"
      :data="studentData"
      style="width: 98%;height:30vw"
      :default-sort = "{prop: 'date', order: 'descending'}"
    >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="姓名"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="userID"
        label="学号"
        :formatter="formatter">
      </el-table-column>
      <el-table-column
        prop="major"
        label="院系"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="contact"
        label="电话"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editDialog = true">编辑</el-button>
          <el-button
            fixed="right"
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="学生信息" :visible.sync="editDialog" style="margin-top:100px;" width="550px">
          <div style="text-align:center;height:50px;padding-bottom:15px;height:100%">
            <span>OJBK-</span>
            <span>新媒体实务-</span>
            <span>游戏系-</span>
            <span>黄宋杰</span>
          </div>
          <div style="text-align:center;height:50px;height:100%;padding-bottom:20<!---->px">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="项目">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="学号">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="所属院系">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="电话">
              <span style="cursor:pointer;padding:6px;font-size:16px;font-weight:bold" type="primary" @click="goEdit">确 定</span>
          </div>
        </el-dialog>
  </div>
</template>
<style scoped>
   .showUp-enter-active {
  transition: all .3s ease;
  }
  .showUp-leave-active {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .showUp-enter, .showUp-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateY(20px);
    opacity: 0;
}
</style>
<script>
    import axios from 'axios'
  export default{
    data(){
      return{
        upath: '',
        userRoot: '',
        editDialog:false,
          addTittle:'添加',
          addSrc:'/src/assets/closeL.png',
          selected:"工号",
        studentData:[],

      }
    },
     mounted:function(){
            this.studentData=JSON.parse(this.$route.query.t_users);
            console.log(this.studentData);
        },
    methods: {
          upload: function () {
           // console.log(this.upath);
              var zipFormData = new FormData();
              zipFormData.append('filename', this.upath);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
                      zipFormData.append('itRoot',this.userRoot);
              let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
              var _this = this;
              axios.post('/users/Excel_register',zipFormData,config).then(function (res) {
                 alert(res.data.msg);
                console.log(res.data);
                console.log(res.bodyText);     
              }).catch(function (err) {
                  console.log(err);
              });
          },
     
         getFile: function (even,theRoot) {
            this.upath = event.target.files[0];
            this.userRoot=theRoot;
            console.log(this.userRoot);
            console.log(this.upath);
          },
      goEdit(){
        this.editDialog=false;
      },
      addC(){
            switch (this.$refs.addC.style.width){
                    case "50px":
                    console.log(this.$refs.addC.style.opacity)
                    this.$refs.op.style.display="block";
                    this.$refs.op.style.opacity="1.0";
                    this.$refs.addC.style.width="680px";
                    this.$refs.addC.style.borderBottom="1px solid gray";
                    this.$refs.addTittle.style.opacity="0.0"
                    this.$refs.addTittle.style.right="0px"
                    this.addTittle="..."
                    this.addSrc="/src/assets/closeR.png"
                   /* this.$refs.addC.style.opacity="1.0";*/
                    console.log(this.$refs.addC.style.opacity)
                    break;
                    case "680px":
                    this.$refs.op.style.opacity="0.0";
                    this.$refs.addC.style.width="50px";
                    this.$refs.addTittle.style.opacity="1.0"
                    this.$refs.addTittle.style.right="15px"
                    this.addTittle="添加"
                    this.addSrc="/src/assets/closeL.png"
                    this.$refs.addC.style.borderBottom="1px solid #eee";
                }
          },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>
